<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.js"></script>
    <title>监听属性</title>
</head>

<body>
    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="change">切换天气</button>
        <button @click="isHot = !isHot">切换天气</button>
        <hr>
        <!-- <div>{{number.a}}</div><br>
        <div>{{number.b}}</div><br>
        <button @click="number.a++" >增加</button>
        <button @click="number.b++" >减少</button> -->

        
    </div> 
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
                number:{
                    a:1,
                    b:1
                }
            },

            computed: {
                info() {
                    return this.isHot ? "炎热" : "寒冷"
                }
            },

            methods: {
                change() {
                    this.isHot = !this.isHot
                },
                
            }
            ,
            // 监视属性
            watch:{
                //immediate:ture,初始就调用
                // info:{
                //     // handler方法:如果被监视的东西遭到改变则会执行handler方法,并且会有俩个返回值,一个是新值,一个是老值
                //     handler(newValue, oldValue){
                //        console.log(newValue + oldValue)
                //     }
                // }
               
                // number:{
                //     // watch默认不监视内部的改变,但是vue是可以检测内部改变
                //     // 加了deep后就可以监视内部的改变了
                //     deep:true,
                //     handler(newValue, oldValue){
                        
                //             console.log("a");
                        
                //     }
                // }


                // 简写模式
                    // 代价是不能加immediated & deep
                isHot(cur, pre){
                    console.log("aa",cur,pre);
                }
            }
        })

        // 通过实例对象添加
        // vm.$watch("info", {
        //     // handler方法:如果被监视的东西遭到改变则会执行handler方法,并且会有俩个返回值,一个是新值,一个是老值
        //     handler(newValue, oldValue) {
        //         console.log(newValue + oldValue)
        //     }
        // })
      
    </script>
</body>

</html>